import React from 'react';
// 解析 MD 语法用的
import MarkdownIt from 'markdown-it';
// 用来编辑 MD 的组件
import MdEditor from 'react-markdown-editor-lite';
// import style manually
import 'react-markdown-editor-lite/lib/index.css';


const Md = () => {

  const mdParser = new MarkdownIt(/* Markdown-it options */);
  function handleEditorChange({ html, text }) {
    // 当编辑器内容发生改变时的回调函数
    console.log('handleEditorChange', html, text);
  }

  return (
    <div>
      <h3>MD 编辑器</h3>
      <MdEditor style={{ height: '500px' }} renderHTML={text => mdParser.render(text)} onChange={handleEditorChange} />
    </div>
  );
};

export default Md;
